<template>
  <div class="manager-list-tab-panel"> 

        <el-form ref="form" :model="form" label-width="0px">
            <tx-button-add :name="$dictValue('新增{name}')" @click="handleNew()" />
            <tx-list-table :table="table"  ref="listTable" row-key="name" v-loading="table.loading">
                <tx-table-column-text prop="sort" label="排序" width="60" />
                <tx-table-column-text :label="$dictValue('姓名')"  >
                    <template slot-scope="scope">
                        <tx-table-input :entity="scope.row" name="name" :action="scope.row.$action"
                        :rules="formRules.name"
                        :prop="buildRowProp(scope,'name')"  :placeholder="$dictValue('请输入姓名')" 
                        /> 
                    </template>
                </tx-table-column-text>
                <tx-table-column-text label="单位"   >
                    <template slot-scope="scope">
                        <tx-table-input :entity="scope.row" name="orgName" :action="scope.row.$action"
                        :rules="formRules.orgName"
                        :prop="buildRowProp(scope, 'orgName')"  placeholder="请输入单位" 
                        /> 
                    </template>
                </tx-table-column-text> 
                <tx-table-column-text  label="职务"  >
                    <template slot-scope="scope">
                        <tx-table-input :entity="scope.row" name="job" :action="scope.row.$action"
                        :rules="formRules.job"
                        :prop="buildRowProp(scope, 'job')"  placeholder="请输入职务" 
                        /> 
                    </template>
                </tx-table-column-text> 
                <tx-table-column-text label="手机号" width="150">
                    <template slot-scope="scope">
                        <tx-table-input :entity="scope.row" name="phone" :action="scope.row.$action"
                        :rules="formRules.phone"
                        :prop="buildRowProp(scope, 'phone')"  placeholder="请输入手机号" 
                        /> 
                    </template>
                </tx-table-column-text>
                <tx-table-column-action width="150" align="left" :key="$columnKey()" >
                    <template slot-scope="scope">
                        <el-form :ref="`form${scope.scope.scope.$index}`" :model="form.record" :rules="formRules" style="display:none"> 
                            <tx-form-input :entity="form.record" name="name"   />
                            <tx-form-input :entity="form.record" name="orgName"   />
                            <tx-form-input :entity="form.record" name="job"   />
                            <tx-form-input :entity="form.record" name="phone"   />  
                        </el-form>
                        <!-- <tx-link text="编辑" name="dept" :query="{itemId: scope.row.itemId}"  />
                        <tx-link text="删除" name="dept" :query="{itemId: scope.row.itemId}"  />  -->
                        <el-button
                        type="primary"
                        size="mini"
                        v-if="scope.row.$action!='modify'"
                        class="table-edit-btn"
                        @click="handleEdit(scope)"
                        >编辑
                        </el-button>
                        <el-button
                        type="primary"
                        size="mini"
                        v-if="scope.row.$action=='modify'"
                        @click="handleSave(scope)"
                        class="table-save-btn"
                        >保存
                        </el-button>
 
                        <tx-button-text-delete  class="table-del-btn" v-if="scope.row.$action=='view'"
                        controller="UserController" idKey="id" :idValue="scope.row.id" :success="$handleQuery" target="记录"  />
         
                        <el-button size="mini" type="warning" v-if="scope.row.$action=='modify'"
                        @click="handleCancel(scope)"
                        class="table-cancel-btn"
                        >取消
                        </el-button>

                    </template> 
                </tx-table-column-action>
            </tx-list-table>
            {{
            $nextTick(()=>{
                $initDragTable($refs['listTable'],  table.page, "records" )
            })
            }}
        </el-form>
  </div>
</template>
<script>

 

export default {
  props: {
    active: {
      type: [String],
      default: ""
    },
    name: {
      type: [String],
      default: ""
    },
    dict: {
      type: Object,
      default() {
        return {
          name:"",
          isLeader: "1"
        };
      },
    },
  },
  data() {
      return { 
          table: {
              loading: false,
              query: {},
              sort: {
                  descs: ['updateTime'],
              },
              page: this.$yzvue.initPage()
          },
          
          // dict: dicts[this.name],
          form: {
              new:{
                name:"",
                orgName:"",
                job:"",
                phone:"",
                // menuID:"",
                // areaCode:"",
                // createdBy:"",
              },
              record:{
                name:"",
                orgName:"",
                job:"",
                phone:"",
              },
              records: [], 
          },
          formRules: {
              name: this.$rule.name("姓名", null, 32), 
              orgName: this.$rule.name("单位", null, 32), 
              job: this.$rule.name("职务", null, 32), 
              phone: this.$rule.mobile("手机号", true ) 
          },
      };
  },
  
  components: { 
  },
  watch: {
    "active": {
      handler(n, o) {
        if (n && n == this.name) {
          this.loadTable();
        }
      }
    }
  },
  mounted() {
    if (this.active == this.name) {
      this.loadTable();
    } 
  },

  methods: {
    handlePageChange(size, current) {
      this.loadTable(null, size, current);
    },

    handleNew() { 
      let newRow=Object.assign({$action:"modify"}, this.form.new)
      console.log(newRow);
      this.table.page.records.push(newRow)
      console.log(this.table);
    },


    handleQuery() {
      this.loadTable();
    },

    loadTable() {
        let param=this.$handleQueryParam()
        param.body.isLeader= this.dict.isLeader,
         
        this.table.loading = true;   
        this.$api.UserController.list(param, res => {
            this.table.loading = false;
            console.log(res); 
            for (let ri = 0; ri < res.data.length; ri++) {
                const re = res.data[ri];
                re.$action="view"
            }
            this.$yzvue.assembleBody(this.table.page, {records:res.data});
            this.form.records=res.data
            this.$nextTick(() => {
                this.$initDragTable(this.$refs['listTable'], this.table.page, "records")
            });
        });
    },
    
        buildRowProp($scope, field) { 
            let { scope: { scope }  } = $scope;   
            return `records.${scope.$index}.${field}` 
        },
        
        getQueryParam() {
            let param = this.$yzvue.assemblePage(this.table);
            let query = this.table.query;
            this.$yzvue.appendFilter(param.body.filters, "name", "like", query.name);
            return param;
        }, 
        
        // 编辑
        handleEdit($scope) {
            $scope.row.$action="modify"
            let {name, orgName,job, phone}=$scope.row
            $scope.row.$origin={ name, orgName,job, phone}
        },
         
        // 保存
        handleSave($scope) {
            Object.assign(this.form.record, $scope.row)
            console.log(this.form.record);
            console.log($scope.row);
            this.$handleFormValidate(`form${$scope.scope.scope.$index}`,()=>{
                let {id, name, orgName, job, phone}=$scope.row
                let isModify=id
                
                let pack={ }
                if(isModify){
                  pack.body={
                    id, name, orgName, job, phone, 
                    isLeader: this.dict.isLeader,
                  }  
                }else{
                  pack.body={
                    id, name, orgName, job, phone, 
                    isLeader: this.dict.isLeader,
                    menuID: this.getParameter("menuId"),
                    areaCode: this.$userInfo.areaCode,
                    createdBy: this.$userInfo.phone
                  }  
                }
 

                this.table.loading = true;

                let newMethod=this.$api.UserController.new
                let updateMethod=this.$api.UserController.update
                this.$invokeSave(pack, "id", newMethod, updateMethod, (res)=>{
                    this.table.loading = false; 
                    if(res && res.data){
                        $scope.row.$action="view"
                        if(!isModify){ 
                          $scope.row.id=res.data
                        }
                    } 
                })
            })
        },
        // 取消
        handleCancel($scope) {
            Object.assign($scope.row, $scope.row.$origin)
            $scope.row.$action="view"
            this.$refs['form'].clearValidate()

        },
        //删除
        handleDelete($scope) {
          let {
              scope: { scope },
          } = $scope;
          this.table.page.records.splice(scope.$index,1);
          // 请求后台接口删除数据库数据
        }
  }
};
</script>


<style lang="scss">
$car-table-border-color: #e4e4e4;
$car-table-title-color: #f5f5f5;

.manager-list-tab-panel {

  .tx-list-query{
      
      margin: 0px;
      
      // border: 2px solid $c-bd-menu;
  }
  .tx-block{
      width: auto;
      margin: 15px 0px;
      background-color: $c-bg-query;
      border: 1px solid $c-bd-content;
  }

  .el-table td.el-table__cell{ 
      padding: 8px 0px 0px 0px;
      .cell>span{
          display: block;
          padding-bottom: 13px;
          line-height: 30px;
      }
      .tx-table-column-action{ 
          display: block;
          padding-bottom: 10px;
      }
      
      .el-input__inner{
          height: 30px;
          line-height: 30px;
          padding: 0px 5px;
      }
      .el-form-item {
          margin-bottom: 13px;
      }
      .el-form-item__content{  
          line-height: 30px;
      }
      .el-form-item__error{
          padding-top:0px
      }
  }
}
</style>


